<template>
	<!-- 套餐总览 -->
	<div class="container" style="margin-left: 20px">
		<div class="homeTitle">
			<div>
				套餐总览<i>{{ days()[1] }}</i>
			</div>
			<div class="detailClass" @click="itemClick('/setmeal')">
				<div>套餐管理</div>
				<el-icon>
					<ArrowRight />
				</el-icon>
			</div>
		</div>
		<div class="containerBox">
			<div class="item">
				<div class="tit">
					<img src="/@/assets/icons/gzt_yiqishou@2x.png" />
					<div style="margin-left: 5px">已起售</div>
				</div>
				<div class="num">{{ setMealData?.sold }}</div>
			</div>
			<div class="item">
				<div class="tit">
					<img src="/@/assets/icons/gzt_yitingshou@2x.png" />
					<div style="margin-left: 5px">已停售</div>
				</div>
				<div class="num">{{ setMealData?.discontinued }}</div>
			</div>
			<div class="add" @click="itemClick('/setmeal/add')">
				<el-icon style="font-size: 20px"><CirclePlus /></el-icon>
				<div class="text">新增套餐</div>
			</div>
		</div>
	</div>
</template>
<script setup lang="ts" name="overview">
import { useRouter } from 'vue-router';
import { CirclePlus } from '@element-plus/icons-vue';
import { ArrowRight } from '@element-plus/icons-vue';
import { getday } from '/@/utils/formValidate';

const router = useRouter();

const props = defineProps({
	setMealData: {
		type: Object,
	},
});

const days: any = () => {
	return getday();
};

const itemClick = (pathUrl: string) => {
	router.push({ path: pathUrl });
};
</script>
<style lang="scss" scoped>
@import '../css/common.scss';
.containerBox{
	.item {
		cursor: default
	}
}
</style>
